'use client'

import { useParams } from 'next/navigation'
import { Card, Button, Table, Tag } from 'antd'
import { ArrowLeftOutlined, UploadOutlined, DeleteOutlined } from '@ant-design/icons'
import type { ColumnsType } from 'antd/es/table'

interface Document {
  id: string
  name: string
  type: string
  size: string
  uploadTime: string
}

interface Dataset {
  id: string
  name: string
  description: string
  documentCount: number
  lastUpdated: string
  documents: Document[]
}

const MOCK_DATASETS: Record<string, Dataset> = {
  '1': {
    id: '1',
    name: '产品文档',
    description: '包含所有产品相关的文档和说明',
    documentCount: 42,
    lastUpdated: '2024-03-20',
    documents: [
      {
        id: '1',
        name: '产品使用手册.pdf',
        type: 'PDF',
        size: '2.5MB',
        uploadTime: '2024-03-20'
      },
      {
        id: '2',
        name: '安装指南.docx',
        type: 'Word',
        size: '1.2MB',
        uploadTime: '2024-03-19'
      }
    ]
  },
  '2': {
    id: '2',
    name: '技术规范',
    description: '技术架构和API文档',
    documentCount: 15,
    lastUpdated: '2024-03-19',
    documents: [
      {
        id: '1',
        name: 'API文档.md',
        type: 'Markdown',
        size: '500KB',
        uploadTime: '2024-03-19'
      }
    ]
  }
}

export default function DatasetDetailPage() {
  const params = useParams()
  const datasetId = params.datasetId as string
  const dataset = MOCK_DATASETS[datasetId]

  if (!dataset) {
    return <div className="p-6">知识库不存在</div>
  }

  const columns: ColumnsType<Document> = [
    {
      title: '文档名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      render: (type: string) => <Tag>{type}</Tag>,
    },
    {
      title: '大小',
      dataIndex: 'size',
      key: 'size',
    },
    {
      title: '上传时间',
      dataIndex: 'uploadTime',
      key: 'uploadTime',
    },
    {
      title: '操作',
      key: 'action',
      render: () => (
        <Button 
          type="text" 
          danger 
          icon={<DeleteOutlined />}
        >
          删除
        </Button>
      ),
    },
  ]

  return (
    <div className="p-6">
      {/* 返回按钮和操作区 */}
      <div className="flex justify-between mb-6">
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={() => window.history.back()}
        >
          返回
        </Button>
        <Button type="primary" icon={<UploadOutlined />}>
          上传文档
        </Button>
      </div>

      {/* 知识库信息 */}
      <Card title={dataset.name} className="mb-6">
        <p className="text-gray-600 mb-4">{dataset.description}</p>
        <div className="flex gap-4 text-sm text-gray-500">
          <span>文档数量：{dataset.documentCount}</span>
          <span>最后更新：{dataset.lastUpdated}</span>
        </div>
      </Card>

      {/* 文档列表 */}
      <Table 
        columns={columns} 
        dataSource={dataset.documents}
        rowKey="id"
      />
    </div>
  )
} 